<template>
  <van-cell class="comment-item">
    <!-- one -->
    <div class="userInfo">
    <img :src="reply?.avatar">
    <span class="nickname">{{reply?.nickname}}</span>
    <van-rate v-model="value" readonly />
    </div>
    <!-- two -->
    <p class="time">{{reply?.add_time}} {{ reply?.sku}}</p>
    <!-- three -->
    <p class="comment-conent">{{reply?.comment }}</p>
    <!-- four -->
    <ul class="picture">
      <li
      v-for="(item, index) in reply?.pics" :key="index">
      <img :src="item">
    </li>
    </ul>
  </van-cell>
</template>
<script setup>
import { Cell as VanCell, Rate as VanRate } from 'vant'
import { computed } from '@vue/reactivity';

const { reply } = defineProps({
  reply: {
    type: Object,
    required: true
  }
})
const value = computed(() => Number(reply?.star))
</script>
<style lang='scss' scoped>
.comment{
  margin-bottom: 10px;
  .comment-item{
    line-height: 40px;
    .userInfo{
      font-size: 14px;
      padding: 5px;
      display: flex;
      align-items: center;
      img{
        width: 30px;
        height: 30px;
      }
      .nickname{
        margin: 5px;
        font-weight: 600;
      }

    }
    .time{
      color:#bbb;
      font-size: 18px;
      font-weight: 500;
    }
    .comment-conent{
      color:#555;
      font-size: 18px;
    }
    .picture{
      li{
        float: left;
        img{
        height: 88px;
        width: 88px;
      }
      }
    }
  }
}
</style>